<template>
  <Header></Header>
  <!-- 主内容区域 -->
  <main class="container max-w-screen-xl mx-auto p-4">
    <!-- grid 表格布局，分为 4 列，元素间隔为 gap-4  -->
    <div class="grid grid-cols-4 gap-4">
      <!-- 左边栏，占用 3 列 -->
      <div class="col-span-4 md:col-span-3 animate__animated animate__bounceInUp animate__fast">
        <div class="grid grid-cols-2 gap-4">
          <div
              v-for="item in articleList" :key="item.id"
              @click="gotoArticleDetail(item.id)"
              class="col-span-2 md:col-span-1 hover:scale-[1.03] cursor-pointer"
              style="transition: transform 0.2s ease;">
            <div
                class="h-[526px] max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700"
                style="position: relative;">
              <div v-if="item.isTop" style="position: absolute; top: -1px; left: -3px">
                <svg t="1711250874665" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="20349" width="48" height="48">
                  <path d="M0 943.786667h66.56v-100.693334z" fill="#BF7500" p-id="20350"></path>
                  <path d="M460.8 0L0 406.186667v537.6L1024 0z" fill="#1296db" p-id="20351"
                        data-spm-anchor-id="a313x.search_index.0.i51.7cff3a815Tn515" class="selected"></path>
                  <path
                      d="M261.12 552.96l18.773333-17.066667-66.56-75.093333 52.906667-46.08-6.826667-6.826667-68.266666 61.44-13.653334-15.36 68.266667-61.44-6.826667-8.533333-59.733333 54.613333-35.84-39.253333 151.893333-136.533333 35.84 39.253333-64.853333 58.026667 6.826667 6.826666 71.68-64.853333 13.653333 15.36-71.68 64.853333 6.826667 6.826667 56.32-49.493333 66.56 75.093333 18.773333-17.066667 13.653333 15.36-174.08 155.306667-13.653333-15.36zM187.733333 402.773333l22.186667-18.773333-10.24-10.24-22.186667 18.773333 10.24 10.24z m42.666667-37.546666l22.186667-18.773334-10.24-10.24-22.186667 18.773334 10.24 10.24z m107.52 11.946666l-87.04 76.8 5.12 6.826667 87.04-76.8-5.12-6.826667z m-44.373333-68.266666l-10.24-10.24-22.186667 18.773333 10.24 10.24 22.186667-18.773333zM273.066667 477.866667l87.04-76.8-5.12-6.826667-87.04 76.8 5.12 6.826667z m15.36 18.773333l87.04-76.8-5.12-6.826667-87.04 76.8 5.12 6.826667z m17.066666 17.066667l87.04-76.8-6.826666-6.826667-87.04 76.8 6.826666 6.826667zM312.32 250.88l61.44-54.613333 20.48 23.893333-15.36 13.653333 95.573333 107.52c6.826667 6.826667 10.24 13.653333 11.946667 20.48 1.706667 6.826667 0 11.946667-3.413333 17.066667-3.413333 5.12-11.946667 13.653333-27.306667 27.306667-6.826667-6.826667-15.36-11.946667-23.893333-18.773334 5.12-3.413333 11.946667-8.533333 17.066666-13.653333 5.12-3.413333 5.12-8.533333 0-13.653333L356.693333 256l-22.186666 20.48-22.186667-25.6z m63.146667-58.026667l105.813333-95.573333L501.76 119.466667l-46.08 40.96 11.946667 18.773333L512 139.946667l71.68 80.213333-23.893333 20.48-52.906667-58.026667-54.613333 47.786667 52.906666 59.733333-23.893333 20.48-71.68-80.213333 30.72-27.306667-11.946667-18.773333-34.133333 30.72-18.773333-22.186667z m102.4 34.133334l22.186666-20.48c15.36 17.066667 25.6 32.426667 34.133334 46.08 25.6-5.12 52.906667-8.533333 80.213333-10.24l1.706667 32.426666c-20.48 0-44.373333 3.413333-73.386667 5.12 3.413333 20.48-1.706667 46.08-18.773333 76.8-10.24-3.413333-20.48-6.826667-34.133334-10.24 10.24-15.36 15.36-29.013333 18.773334-40.96s1.706667-25.6-3.413334-37.546666c-3.413333-11.946667-13.653333-25.6-27.306666-40.96z"
                      fill="#FFFFFF" p-id="20352"></path>
                </svg>
              </div>
              <div>
                <img class="rounded-t-lg h-80 w-full" :src="item.cover" alt=""/>
              </div>
              <!-- 标签 -->
              <div class="pl-4 pt-2 " style="display: flex;flex-wrap: wrap;">
                <span v-for="tag in item.tags" :key="tag.id"
                      class="cursor-pointer bg-indigo-100 text-indigo-900 text-1xl font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">
                  {{ tag.name }}
                </span>
              </div>
              <div class="pl-4 pr-4 pt-2">
                <!-- 文章标题 -->
                <a @click="goArticleDetailPage(article.id)" class="cursor-pointer">
                  <h2 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
                    <span class="hover:border-gray-600 hover:border-b-2">{{ item.title }}</span>
                  </h2>
                </a>
                <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">{{ item.summary }}</p>
              </div>
              <!-- 文章发布时间、所属分类 -->
              <p class="flex items-center pl-4 font-normal text-gray-400 text-sm dark:text-gray-400"
                 style="position: absolute; bottom: 5px">
                <!-- 发布时间 -->
                <svg class="inline w-3 h-3 mr-2 text-gray-400 dark:text-white" aria-hidden="true"
                     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2"
                        d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h10M2 3h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z"/>
                </svg>
                {{ item.createTime }}

                <!-- 所属分类 -->
                <svg class="inline w-3 h-3 ml-5 mr-2 text-gray-400 dark:text-white" aria-hidden="true"
                     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2"
                        d="M1 5v11a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H1Zm0 0V2a1 1 0 0 1 1-1h5.443a1 1 0 0 1 .8.4l2.7 3.6H1Z"/>
                </svg>
                <a href="#" class="text-gray-400 hover:underline">{{ item.category.name }}</a>
              </p>
            </div>
          </div>
        </div>
        <!-- 分页栏 -->
        <nav class="flex items-center justify-center mt-4" aria-label="Page navigation example">
          <h2 class="mr-4">共{{ total }}篇文章</h2>
          <ul class="flex items-center -space-x-px h-10 text-base">
            <li>
              <p class="cursor-pointer flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                <span class="sr-only">Previous</span>
                <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                     viewBox="0 0 6 10">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M5 1 1 5l4 4"/>
                </svg>
              </p>
            </li>
            <li v-for="index in pageSize" :key="index" @click="changePage(index)">
              <p class="cursor-pointer flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                {{ index }}
              </p>
            </li>
            <li>
              <p class="cursor-pointer flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                <span class="sr-only">Next</span>
                <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                     viewBox="0 0 6 10">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="m1 9 4-4-4-4"/>
                </svg>
              </p>
            </li>
          </ul>
        </nav>
      </div>
      <!-- 右边侧边栏，占用一列 -->
      <aside class="col-span-4 md:col-span-1 animate__animated animate__bounceInDown animate__fast">
        <UserInfo/>
        <CategoryInfo/>
        <TagInfo/>
      </aside>
    </div>
  </main>
  <ScrollToTopButton/>
  <Footer/>
</template>

<script setup>
import Header from "@/layouts/fronted/components/Header.vue";
import Footer from "@/layouts/fronted/components/Footer.vue";
import UserInfo from "@/layouts/fronted/components/UserInfo.vue";
import CategoryInfo from "@/layouts/fronted/components/CategoryInfo.vue";
import TagInfo from "@/layouts/fronted/components/TagInfo.vue";
import {onMounted, ref} from "vue"
import {pageQueryArticle} from "@/api/frontend/article.js"
import {useRouter} from "vue-router";
import ScrollToTopButton from "@/components/ScrollToTopButton.vue";

const router = useRouter()
const articleList = ref([])
const current = ref(1)
const size = ref(6)
const total = ref(0)
const pageSize = ref(0)

onMounted(() => {
  getBlogList()
})

function getBlogList() {
  pageQueryArticle(current.value, size.value).then(resp => {
    if (resp.success) {
      articleList.value = resp.data
      total.value = resp.total
      // 计算有多少页面
      pageSize.value = Math.ceil(total.value / size.value);
    }
  })
}


const gotoArticleDetail = (id) => {
  router.push('/article/detail/' + id)
}

const changePage = (cur) => {
  current.value = cur
  getBlogList()
}
</script>

<style scoped>
.max-w-sm {
  max-width: 48rem;
}

</style>
